<template>
	<view class="content">
		<image class="img_lx" src="/static/img/img_lx.png"></image>
		<view class="laview">
			<view class="headview">
				<image class="icon_backs" @click="getfan" src="/static/img/icon_back.png"></image>
				<view class="headtab">
					<view class="tabview" :class="isHead==1?'tactive':''" @click="headClick(1)">推广奖励</view>
					<view class="tabview" :class="isHead==2?'tactive':''" @click="headClick(2)">裂变奖励</view>
				</view>
				<!-- <view class="guiview" @click="guishow=true">
					<image class="icon_gz" src="/static/img/icon_gz.png"></image>
					<text>规则</text>
				</view> -->
			</view>
			<view class="shuoming" v-if="uinfo.time">
				{{uinfo.time}}
			</view>
			<view class="navview">
				<view class="navone">
					<image class="icon_jl" src="/static/img/icon_jl.png"></image>
					<text class="gnametit">邀请好友巨额奖励</text>
				</view>
				<text class="yaonum">{{uinfo.shouyi_money}}</text>
				<text class="yaomiao">当前已领奖金</text>
				<view class="yaobot">
					<text class="painame">已邀请人数</text>
					<text class="charen">{{uinfo.tixian_count}}人</text>
					<view class="liyao" @click="getyao">立即邀请</view>
				</view>
			</view>
			<view class="tipai">
				<!-- <image class="yaonavbg" src="/static/img/yaonavbg.png"></image> -->
				<view class="tione">
					{{ isHead==1?'一级好友提现人数排名':'一级好友完成总人数' }} 
				</view>
				<view class="tilist" v-if="isHead == 1">
					<view class="tihead">
						<view class="tipaiitem">排名</view>
						<view class="tipaiitem center">一级好友提现人数</view>
						<view class="tipaiitem end">奖金(元)</view>
					</view>
					<scroll-view scroll-y class="pailist">
						<view class="tihead tinav" v-for="(item,index) in tuilist" :key="index">
							<view class="tipaiitemtwo">
								<image class="icon_1" src="/static/img/icon_1.png" v-if="item.sort==1"></image>
								<image class="icon_1" src="/static/img/img_2.png" v-else-if="item.sort==2"></image>
								<image class="icon_1" src="/static/img/img_3.png" v-else-if="item.sort==3"></image>
								<view class="iconview" v-else>
									<image class="icon_1" src="/static/img/beiicon.png"></image>
									<view class="cname">{{ item.sort }}</view>
								</view>
								
								<text class="tname txt">{{ item.nickname }}</text>
							</view>
							<view class="tipaiitemtwo center">
								<text class="tname txt">{{item.count}}</text>
							</view>
							<view class="tipaiitemtwo end">
								<text class="tname price txt">{{item.money}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="tilist" v-if="isHead == 2">
					<view class="tihead">
						<view class="tijiang">
							<!-- 先拿裂变奖励 42856元，后期佣金躺赚 -->
						</view>
					</view>
					<scroll-view scroll-y class="pailist">
						<view class="tihead tishu" v-for="(item,index) in lielist" :key="index">
							<view class="shu">
								<view class="iconview">
									<image class="icon_1" src="/static/img/beiicon.png"></image>
									<view class="cname">{{ index+1 }}</view>
								</view>
								<!-- <image class="icon_1" src="/static/img/icon_1.png"></image> -->
							</view>
							<view class="tiren">
								<text class="renname">{{ item.title }}</text>
								<view class="jinview">
									<view class="jindu">
										<view class="jinxuan" :style="{ width: item.bfb+'%' }"></view>
									</view>
									<text class="jinnum">{{item.bfb}}%</text>
								</view>
							</view>
							<text class="renprice">{{item.price}}元</text>
							<view class="lin " :class="item.status==1?'yiling':''" @click="getyiling(item)">{{item.status_text}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- <u-parse :html="teaminfo.content"></u-parse> -->
		<u-popup v-model="guishow" mode="center" @close="guishow=false" width="82%" :closeable="true" z-index="1000">
			<view class="mpop">

				<text class="yantit">
					拉新规则
				</text>
				<scroll-view class="laview" scroll-y>
					<u-parse :html="guicontent"></u-parse>
				</scroll-view>
				<view class="zhidao" @click="guishow=false">知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle:{
					fontWeight: 'bold',
					fontSize: '36rpx',
					color: '#111111',
				},
				value:'',

				list: [{},{}],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				uinfo:{},
				keyword:'',
				tablist:[
					{
						name: '全部'
					},
					{
						name: '待审核'
					},
					{
						name: '审核通过'
					},
					{
						name: '审核拒绝'
					},
				],
				current:0,
				isHead:1,
				checked:false,
				submitPageShow:false,
				tuilist:[],
				lielist:[],
				guishow:false,
				guicontent:''

			}
		},
		onLoad() {
			this.getinit()
			// this.getxieyi()
		},
		onShow() {
		},
		onReachBottom: function () {
			// this.loadmore();
		},
		methods: {
			async getxieyi(){
				let res = await this.$u.api.getContent({
					code:'laxinguize'
				});
				// this.title = res.title
				this.guicontent = res.content
			},
			async getinit(){
				let res = await this.$u.api.getTuiguangList({
				});
				this.uinfo = res
				this.tuilist = res.list
			},
			async getinittwo(){
				let res = await this.$u.api.getFengHongTask({
				});
				this.lielist = res.list
			},
			
			tabchange(e){
				this.current = e
			},
			getDetail(){
				this.navrouter("/pages/StudPage/Detail");
			},
			async getList(){//列表数据
				let res = await this.$u.api.orderlists({
					limit:this.limit,
				  	page:this.page
				});
				// console.log(res)
				
				this.last_page = res.list.last_page;
				let list = res.list.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];	
				if(this.page >= this.last_page){
				  this.status = 'nomore';
				}

				
			},
			loadmore() {
				let page = this.page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getfan(){
				uni.navigateBack()
			},
			headClick(e){
				this.isHead = e
				if(e == 1){
					this.getinit()
				}else if(e == 2){
					this.getinittwo()
				}
			},
			changecheck(e){
				console.log(e)
				this.checked = e.value
				if(this.checked){
					this.current = 2
				}
				// this.page = 1;
			  	// this.getList();
			},
			newitemClick(){
				this.submitPageShow = true
			},
			getyao(){
				this.navrouter('/pages/TPage/YaoPage')
			},
			async getyiling(item){
				if(item.status == 0&&item.is_get!=0){
					let res = await this.$u.api.doFenhongTask({
						id:item.id
					});
					this.$u.toast("领取成功");
					this.getinittwo()
				}
				

			}
		}
	}
</script>

<style scoped lang="scss">
page{
	background-color: #2365f9;
}
	.content {
		min-height: 100vh;
		background-color: #2365f9;
		padding-bottom: 100rpx;
		position: relative;
		.img_lx{
			position: absolute;
			width: 100%;
			height: 100vh;

		}
		.laview{
			position: relative;

		}
		.headview{
			padding: 20rpx 30rpx 10rpx;
			// background-color: #fff;
			position: relative;
			min-height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// #ifdef APP-PLUS
			padding-top: calc(var(--status-bar-height) + 30rpx);
			// #endif
			.icon_backs{
				position: absolute;
				width: 30rpx;
				height: 36rpx;
				left: 30rpx;
				
			}
			.headtab{
				position: relative;
				width: 440rpx;
				height: 80rpx;
				background: #F5F5F5;
				border-radius: 39rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 5rpx;
				.tabview{
					width: 50%;
					border-radius: 39rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					display: flex;
					height: 100%;
					align-items: center;
					justify-content: center;
				}
				.tactive{
					background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
					color: #fff;
				}
			}

		}
		.guiview{
			position: absolute;
			right: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			top: -3px;
			// #ifdef APP-PLUS
			top: calc(var(--status-bar-height) + 10rpx);
			// #endif
			.icon_gz{
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 9rpx;
			}
			text{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
		.shuoming{
			background-color: rgba(255, 255, 255, 0.4);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			width: 440rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			margin-top: 5%;
		}
		.navview{
			height: 41vh;
			// background-color: #000;
			margin: 7% 67px 0;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
			.navone{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: auto 0 0;
				.icon_jl{
					width: 44rpx;
					margin-right: 9rpx;
					height: 44rpx;
				}
				.gnametit{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #F94101;
				}
			}
			.yaonum{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 72rpx;
				color: #F94101;
				display: block;
				margin: 2px 0 0px;
			}
			.yaomiao{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #666666;
			}
			.yaobot{
				display: flex;
				flex-direction: column;
				align-items: center;
				// margin-top: 55rpx;
				margin-top: auto;
    			margin-bottom: 38px;
				.painame{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #AC0003;
				}
				.charen{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #F8CF4B;
					display: block;
					margin: 10rpx 0 40rpx;
				}
				.liyao{
					width: 320rpx;
					height: 88rpx;
					background: #FCBA40;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #68551A;
					// margin-top: auto;
				}
			}
		}
		.sview{
			background-color: #fff;
			padding: 10rpx 30rpx;

		}
		.tipai{
			margin: -40rpx 30rpx 30rpx;
			position: relative;
			min-height: 550rpx;
			// background-color: rgba(24,113,235,1);
			background: linear-gradient(-86deg, #4FAFF9, #1586EF);
			border-radius: 20rpx;
			padding-bottom: 30rpx;
			// .yaonavbg{
			// 	position: absolute;
			// 	width: 100%;
			// 	height: 100%;
			// }
			.tione{
				background: rgba(255,255,255,0.2);
				border-radius: 0rpx 0rpx 20rpx 20rpx;
				// background-color: rgba(70,149,242,1);
				width: 74%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				padding: 25rpx 0;
				border-radius: 0 0 50% 50%;
				text-shadow: 0rpx 0rpx 7rpx #0069CB;
			}
			.pailist{
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 20rpx 0;
				height: 550rpx;
			}
			.tilist{
				display: flex;
				flex-direction: column;
				// margin-top: 30rpx;
				margin: 30rpx 20rpx 30rpx;
				// padding:  0 20rpx;
				.tihead{
					display: flex;
					flex-direction: row;
					width: 100%;
					margin-bottom: 30rpx;
					padding: 0 20rpx;

				}
				.tishu{
					padding: 20rpx ;
					border-bottom: 1rpx solid #eee;
					display: flex;
					align-items: center;
				}
				.shu{
					width: 48rpx;
					height: 48rpx;
					position: relative;
					
					.icon_1{
						position: absolute;
						width: 100%;
						height: 100%;
					}
				}
				.tiren{
					display: flex;
					flex-direction: column;
					margin-left: 12rpx;
					.renname{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;

					}
					.jinview{
					    display: flex;
						flex-direction: row;
						align-items: center;
						margin-top: 10rpx;
						.jindu{
							width: 200rpx;
							height: 9rpx;
							background: #F5F5F5;
							position: relative;

						}
						.jinxuan{
							position: absolute;
							height: 9rpx;
							background: #45A6F7;
							left: 0;

						}
						.jinnum{
							margin-left: 15rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
				.renprice{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #FB4541;
					margin-left: auto;
				}
				.lin{
					padding: 13rpx 20rpx;

					background: linear-gradient(-41deg, #4CB7F0, #198AFE);
					border-radius: 25rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #FEFEF8;
					margin-left: 15rpx;
				}
				.yiling{
					background: #CCCCCC;
				}
				

				.tijiang{
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					width: 100%;
				}
				.tipaiitem{
					flex: 1;
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
				.end{
					justify-content: flex-end;
				}
				.center{
					justify-content: center;
				}
				.tinav{
					// background: #FFFFFF;
					// border-radius: 10rpx;
					// padding: 20rpx;
				}
				.tipaiitemtwo{
					display: flex;
					flex: 1;
					flex-direction: row;
					align-items: center;
					padding:  10rpx;
					width: 33.33%;
					border-bottom: 1rpx solid #eee;
					.icon_1{
						width: 50rpx;
						height: 50rpx;
					}
					
					.tname{
						margin-left: 8rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						display: inline-block;
						max-width: 70%;
					}
					.price{
						color: #FB4541;
					}
				}
			}
		}
		.newsouview{
			background: #F3F4F6;
			border-radius: 34rpx;
			padding: 14rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			// margin: 0 30rpx;
			.souicon{
				margin-right: 20rpx;
				width: 40rpx;
				height: 40rpx;
			}
			.soutit{
				margin-left: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #222222;
			}
			/deep/.u-input__input{
				min-height: 40rpx !important;
			}
		}
	}

	.iconview{
		width: 50rpx;
		height: 50rpx;
		position: relative;
		.icon_1{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.cname{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 800;
			font-size: 24rpx;
			color: #222222;	
			position: relative;	
		}
	}

	.mpop{
		// padding: 50rpx 30rpx;
		// // #ifdef APP-PLUS
		// padding-top: calc(var(--status-bar-height) + 50rpx);;
		// // #endif
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.laview{
			height: 400rpx;

		}
		.yantit{
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			display: block;
			margin: 10rpx auto 20rpx;
			text-align: center;
		}
		.img_kfz{
			width: 368rpx;
			height: 200rpx;
			margin: 30rpx 0;
		}
		.kaitit{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #3E65E5;
		}
		.kaimiao{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #666666;
			display: block;
			margin-top: 13rpx;
		}
		.zhidao{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 98rpx;
			background: #3E65E5;
			border-radius: 20rpx;
			width: 80%;
			margin-top: 35rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.youname{
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 30rpx;
			color: #8B8B8B;
			display: block;
			text-align: center;
		}
		.yantan{
			margin: 50rpx 0 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.yanfa{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			text{
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 26rpx;
				color: #BBBBBB;
			}
		}
		.querenben{
			height: 96rpx;
			background: #EBEBEB;
			border-radius: 48rpx;
			width: 80%;
			margin: 50rpx auto 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 30rpx;
			color: #A5A5A5;
		}
		.qbtns{
			background: #000000;
			color: #fff;
		}
	}
	/deep/.u-mode-center-box{
		background-color: transparent;
	}
	.immerse {
		width: 100%;
		height: calc(var(--status-bar-height) + env(safe-area-inset-top));
		background-color: #fff;
		// #ifdef APP-PLUS
		height: calc(var(--status-bar-height);
			// #endif
			z-index:100;

		}
</style>